// props校验
import propTypes from "prop-types";
import React from "react";

class Checking extends React.Component{
    state = {
        arrys:[1,2,3],
        person:{
            name:"六曹操",
            age:18,
        }
    }   
    render(){
        return(
            <div>
                <Arrysbox colors={this.state.arrys} obj={this.state.person}></Arrysbox>
            </div>
        )
    }
}


class Arrysbox extends React.Component{
    xh =()=>{
        const arr = this.props.colors;
        const list = arr.map((item,index)=><li key={index}>{item}</li>)
        return (
            <div>
            <ul>
                {list}
            </ul>
            <dl>
                <dd>姓名：{this.props.obj.name}</dd>
                <dd>年龄{this.props.obj.age}</dd>
            </dl>
            </div>
        )
    }
    render(){
        return(
            <div>
                {
                   this.xh()
                }
            </div>
        )
    }
}
// 添加props约束
Arrysbox.propTypes = {
    colors:propTypes.array.isRequired,
    // 特定结构得对象
    obj:propTypes.shape({
        name:propTypes.string,
        age:propTypes.number,
    })
}
Arrysbox.defaultProps = {
    colors:["哈哈",'嘻嘻嘻']
}
export default Checking